<template>
  <div class="contract-payment">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      style="margin: 40px 0;"
    >
      <a-spin :spinning="spinning"></a-spin>
      <a-form-model-item label="纸质合同" prop="paper_contract_file_url">
        <a-upload
          name="file"
          :action="upload"
          :default-file-list="fileList1"
          :headers="headers"
          @change="handleContract"
        >
          <a-button> <a-icon type="upload" /> 上传纸质合同 </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="客户确认截图" prop="customer_confirm">
        <a-upload
          name="file"
          accept=".png,.jpg"
          :action="upload"
          list-type="picture-card"
          :file-list="fileList2"
          :headers="headers"
          @preview="handlePreview"
          @change="handleChange"
        >
          <div v-if="fileList2.length < 1">
            <a-icon type="plus" />
            <div class="ant-upload-text">
              上传确认截图
            </div>
          </div>
        </a-upload>
      </a-form-model-item>
      <!--      <a-form-model-item label="原纸质合同">-->
      <!--        <a v-if="form.paper_contract" :href="form.paper_contract_map" target="_blank"><img :src="form.paper_contract" width="300" /></a>-->
      <!--        <span v-else>无</span>-->
      <!--      </a-form-model-item>-->
      <a-form-model-item
        :wrapperCol="{ span: 9, offset: 3 }"
      >
        <a-button htmlType="submit" type="primary" @click="nextStep">确认保存</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'
  import storage from 'store'
  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => resolve(reader.result)
      reader.onerror = error => reject(error)
    })
  }
  export default {
    name: 'Others',
    props: {
      info: {
        type: Object,
        default: () => {}
      },
      part: {
        type: String,
        default: '2'
      }
    },
    data () {
      return {
        previewVisible: false,
        previewImage: '',
        labelCol: { span: 3 },
        wrapperCol: { span: 7 },
        upload: apis.Upload,
        loading: false,
        spinning: false,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        form: this.info,
        rules: {
          customer_confirm: [
            { required: true, message: '必须上传客户确认截图', trigger: 'blur' }
          ],
          paper_contract_file_url: [
            { required: true, message: '必须上传纸质合同', trigger: 'blur' }
          ]
        },
        fileList1: [],
        fileList2: []
      }
    },
    created () {
      this.isEdit()
    },
    methods: {
      isEdit () {
        const app = this
        if (app.form['paper_contract_file_url']) {
          const fileList1 = []
          const obj = {}
          obj['uid'] = '1'
          obj['name'] = app.form['paper_contract_file_name']
          obj['status'] = 'done'
          obj['url'] = app.form['paper_contract_file_url_map']
          fileList1.push(obj)
          app.fileList1 = fileList1
        }
        if (app.form['customer_confirm']) {
          const fileList2 = []
          const obj = {}
          obj['uid'] = '2'
          obj['status'] = 'done'
          obj['name'] = '123'
          obj['url'] = app.form['customer_confirm']
          fileList2.push(obj)
          app.fileList2 = fileList2
        }
      },
      handleContract ({ file, fileList }) {
        const app = this
        if (file.status === 'uploading') {
          return false
        }
        if (file.status === 'done') {
          app.form['paper_contract_file_name'] = file.name
          app.form['paper_contract_file_url'] = file.response.result.url
        }
      },
      handleChange ({ fileList }) {
        this.fileList2 = fileList
        this.form['customer_confirm'] = fileList[0].response.result.url
        // this.form['customer_confirm'] = fileList[0].response.result.url
        // const app = this
        // if (fileList.status === 'uploading') {
        //   return false
        // }
        // if (fileList.status === 'done') {
        //   app.fileList2 = fileList
        //   app.form['customer_confirm'] = fileList[0].response.result.url
        // }
      },
      handleCancel () {
        this.previewVisible = false
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      nextStep () {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$emit('nextStep', this.part)
          } else {
            return false
          }
        })
      }
    },
    watch: {
      info (val) {
        this.form = {}
        this.form = val
      }
    }
  }
</script>

<style scoped>

</style>
